/* 设置全局字体、背景色和文本颜色 */
body {
    font-family: Arial, sans-serif; /* 字体使用Arial，若没有则使用sans-serif */
    background-color: #f4f4f4; /* 页面背景色 */
    color: #333; /* 文本颜色 */
    margin: 0; /* 清除默认的外边距 */
    padding: 0; /* 清除默认的内边距 */
    height: 100%; /* 使页面的高度为100% */
    display: flex;
    flex-direction: column; /* 垂直排列内容 */
}

/* 内容区域 */
.content {
    flex: 1; /* 占据剩余空间 */
    padding-top: 105px; /* 给顶部固定区域腾出空间 */
    padding-bottom: 60px; /* 给底部固定区域腾出空间 */
}

/* 标题样式 */
h1 {
    color: #4CAF50; /* 标题颜色 */
    font-size: 36px; /* 标题字体大小 */
    margin-bottom: 20px; /* 标题下边距 */
}

/* 列表样式 */
ul {
    list-style-type: decimal; /* 使用数字作为列表标记 */
    margin: 0; /* 清除默认的外边距 */
    padding: 0; /* 清除默认的内边距 */
    margin-left: 20px; /* 左侧外边距 */
    font-size: 18px; /* 列表字体大小 */
    line-height: 1.5; /* 列表行高 */
    font-weight: 400; /* 列表字体粗细 */
    list-style-position: inside; /* 列表标记位于列表项内 */
}

/* 列表项样式 */
li {
    padding: 8px; /* 列表项内边距 */
    margin: 4px 0; /* 列表项上下外边距 */
    background-color: #fff; /* 列表项背景色 */
    border-radius: 5px; /* 圆角效果 */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /* 阴影效果 */
    transition: all 0.3s ease; /* 过渡效果 */
}

/* 链接样式 */

a {
    text-decoration: none; /* 去除链接下划线 */
    color: #2196F3; /* 链接颜色 */
}

/* 链接悬停样式 */

a:hover {
    text-decoration: underline; /* 悬停时添加下划线 */
    color: #4CAF50; /* 链接颜色 */
}

/* 按钮样式 */
.btn-download, .btn-delete {
    background-color: #4CAF50; /* 按钮背景色 */
    color: white; /* 按钮文本颜色 */
    padding: 5px 10px; /* 按钮内边距 */
    border: none; /* 无边框 */
    border-radius: 5px; /* 圆角效果 */
    margin-left: 10px; /* 左侧外边距 */
}

/* 按钮悬停样式 */
.btn-download:hover, .btn-delete:hover {
    background-color: #45a049; /* 悬停时按钮背景色 */
    cursor: pointer; /* 鼠标变成手型 */
}

.footer {
    background-color: #f8f8f8;
    padding: 10px;
    text-align: center;
    position: fixed;
    bottom: 0;
    width: 100%;
}

/* 顶部固定区域 */
.top {
    background-color: #f8f8f8;
    padding: 10px;
    text-align: center;
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 1000; /* 确保它在最上层 */
}
/* 设置文件输入框的整体样式 */
input[type="file"] {
    display: inline-block; /* 使文件上传框保持行内块级元素 */
    padding: 10px; /* 内边距 */
    margin: 10px 0; /* 外边距，上下10px */
    border: 1px solid #ccc; /* 边框 */
    border-radius: 5px; /* 圆角效果 */
    background-color: #fff; /* 背景色 */
    cursor: pointer; /* 鼠标悬停时为指针形状 */
    font-size: 16px; /* 字体大小 */
    width: 100%; /* 让输入框宽度适应父容器 */
    box-sizing: border-box; /* 包括内边距和边框在内的总宽度 */
}

/* 文件夹上传框与普通文件上传框样式一致 */
input[type="file"][webkitdirectory], input[type="file"][directory] {
    border: 1px dashed #4CAF50; /* 使用虚线边框 */
}

/* 文件上传按钮样式 */
input[type="submit"] {
    padding: 12px 20px; /* 上下12px，左右20px的内边距 */
    font-size: 16px; /* 字体大小 */
    background-color: #4CAF50; /* 按钮背景色 */
    color: white; /* 按钮文本颜色 */
    border: none; /* 去除边框 */
    border-radius: 5px; /* 圆角效果 */
    cursor: pointer; /* 鼠标悬停时为指针形状 */
    width: auto; /* 宽度自适应内容 */
    margin-top: 10px; /* 与文件输入框的间距 */
}

/* 按钮悬停样式 */
input[type="submit"]:hover {
    background-color: #45a049; /* 悬停时按钮颜色稍微变深 */
}

/* 如果有上传框，给父容器添加一些间距 */
div {
    margin: 20px 0;
}

/* 给文件输入框添加自定义标签文本 */
input[type="file"]::before {
    content: '选择文件'; /* 提示文字 */
    display: block;
    font-size: 16px;
    color: #4CAF50;
    margin-bottom: 5px;
    text-align: center;
}
.center
{
        text-align: center;
}